<template>
  <div>
    <div id="app" v-if="!isAndroid">
      <!-- 渲染 -->
      <div class="bg"></div>
      <Header :id="getUserid"></Header>
      <nav></nav>
      <main class="flexbox">
        <!-- <transition name="transitionRouter" mode="out-in">
          <router-view :count="count" :ip="ip" :id="userid"></router-view>
        </transition>-->
        <router-view :count="count" :ip="ip" :id="userid"></router-view>
      </main>
      <footer class="copy">
        <transition name="copy" mode="out-in">
          <Copy></Copy>
        </transition>
      </footer>
      <!-- <div>{{count}}{{ip}}</div> -->
    </div>
    <BackTop :height="100" :bottom="200">
      <div class="totop">返回顶端1</div>
    </BackTop>
    <div id="app2" v-if="isAndroid">
      <div class="error">暂不支持手机端/iPad端</div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import header from "./components/mo/header/header";
import copy from "./components/mo/copy/copy";
import { BackTop } from "view-design";
export default {
  data() {
    return {
      count: 0,
      ip: "",
      isAndroid: false,
      userid: ""
    };
  },
  created() {
    this.webSocket();
  },
  computed: {
    goLogin() {
      $(".flexbox").css("margin-bottom", "15px");
      return this.$store.getters.login;
    },
    getUserid() {
      return this.userid;
    }
  },
  created() {
    //查询用户是否登录
    this.$axios.get(this.$store.getters.url + "/nowlogin").then(res => {
      if (!!res.data) {
        this.userid = res.data.id;
        this.$store.dispatch("nowLogins");
      } else {
        localStorage.removeItem("loginfo1");
        localStorage.removeItem("loginfo2");
      }
    });
  },
  mounted() {
    this.webSocket();
    console.log(sessionStorage);
    $("#app").css("min-height", $(window).height());
    window.onresize = function() {
      // $(window).width();
      $("#app").css("min-height", $(window).height());
    };
    var u = navigator.userAgent;
    if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
      //安卓手机
      this.isAndroid = true;
    } else if (u.indexOf("iPhone") > -1) {
      //苹果手机
      this.isAndroid = true;
    } else if (u.indexOf("Windows Phone") > -1) {
      //winphone手机
      this.isAndroid = true;
    } else if (u.indexOf("iPad") > -1) {
      //iPad
      this.isAndroid = true;
    }
    console.log(u);
    // this.Notification();
  },
  methods: {
    webSocket: function() {
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");

        // 打开一个 web socket
        var ws = new WebSocket("ws://localhost:3003/");

        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send("发送数据");
          console.log("数据发送中...");
        };

        ws.onmessage = evt => {
          var received_msg = evt.data;
          console.log("数据已接收..." + received_msg);
          if (received_msg.search("c") !== -1) {
            this.count = received_msg.split("-")[1];
          }
          if (received_msg.search("ip") !== -1) {
            this.ip = received_msg.split("-")[1].split(",");
          }
        };

        ws.onclose = function() {
          // 关闭 websocket
          console.log("连接已关闭...");
        };
      } else {
        // 浏览器不支持 WebSocket
        console.log("您的浏览器不支持 WebSocket!");
      }
    }
  },
  components: {
    Header: header,
    Copy: copy,
    BackTop: BackTop
  }
};
</script>

<style>
@media screen and (max-width: 1370px) {
  .flexbox {
    height: 670px;
  }
}
@media screen and (max-width: 2000px) and (min-width: 1370px) {
  .flexbox {
    height: 948px;
  }
}
#app,
#app2 {
  position: relative;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* font-size: 18px; */
  /* cursor: url(../examples/assets/SAOIcon/icon/equipment_normal.png),auto; */
  background-image: url("../examples/assets/img/bg2.jpg");
  background-attachment: fixed;
  background-size: cover;
}
#app2 {
  justify-content: center;
}
.bg {
  position: absolute;
  top: 0;
  height: 0;
  width: 100%;
  height: 100%;
  /* background-color: #ececec; */
  /* background-image: url("../examples/assets/img/bg2.jpg");
  background-attachment: fixed;
  background-size: cover;  */
  /* filter: blur(5px); //背景虚化 */
}

.copy {
  position: relative;
  /* overflow: hidden; */
  width: 100%;
  height: 45px;
  transition: height 0.4s;
}
.error {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app::-webkit-scrollbar {
  display: none;
}
@font-face {
  font-family: "saoUI";
  /* src: url("./SAOUIRegular.otf"); */
  src: url("./fonts/OPPOSans-M.ttf");
  /* src:url("https://pubmosa.oss-cn-hangzhou.aliyuncs.com/OPPOSans-M.ttf") */
}
* {
  /* font-family: saoUI; */
  margin: 0px;
  user-select: none;
}
a {
  color: black;
}
.totop {
  padding: 10px;
  background: rgba(143, 143, 143, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 2px;
}
.flexbox {
  position: relative;
  display: flex;
  flex: 1;
  /* min-height: 800px; */
  width: 100%;
  min-width: 1200px;
  height: auto;
  justify-content: center;
  align-items: flex-start;
  overflow: hide;
  margin-top: 60px;
  margin-bottom: 15px;
}
html::-webkit-scrollbar {
  display: none;
}
.transitionRouter-enter-active,
.transitionRouter-leave-active {
  transition: all 0.4s;
}
.transitionRouter-enter,
.transitionRouter-leave {
  transform: translate3d(0, 100%, 0);
  /* transform: scale(0); */
}
.copy-leave-active {
  transition: all 0.4s;
}
.copy-leave {
  transform: translate3d(0, 0, 0);
}
.copy-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all 0.4s;
}
.copy-enter {
  transform: translate3d(0, 100%, 0);
}
</stylel>
